/**
 * React Native App
 * dongtao 2017/04/22
 * @flow
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    Modal,
    PixelRatio,
    View,
    TouchableOpacity,
    TouchableWithoutFeedback,
} from 'react-native';
import {Screen} from '../common';

class DialogTouchBgClose extends Component {
    constructor(props) {
        super(props);
        this.state = {

        };
    }

    render() {
        return (
            <Modal
                animationType={'fade'}
                transparent={true}
                visible={this.props.modalVisible}
                onRequestClose={() => { } }
            >
                <TouchableWithoutFeedback
                    onPress={()=>{
                        this.props.onHide();
                    }}
                >
                    <View style={styles.container}>
                        <TouchableWithoutFeedback>
                            <View style={[styles.innerContainer]}>
                                {this.props.items}
                            </View>
                        </TouchableWithoutFeedback>
                    </View>
                </TouchableWithoutFeedback>
            </Modal>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems:'center',
        backgroundColor:'rgba(0, 0, 0, 0.4)',
    },
    innerContainer: {
        position:'absolute',
        top:Screen.height * 0.4 * 0.4,
        width:Screen.width * 0.85,
        height:Screen.height * 0.6,
        alignItems: 'center',
        borderRadius: 20,
        backgroundColor:'#fff',
        padding:16,
    },
});

export default DialogTouchBgClose;